$(function(){
    // 模块一鼠标移入块元素该元素下CRtext改变背景色
    $('.m1 .c1').on({
        'mouseenter':function(){
            $(this).children('.CRtext').css('background','rgb(238,175,206)').children('.intro').css('color',"#fff").end().children('.CRleft .before').css('border-left-color','rgb(238,175,206)').end().children('.CRright .before').css('border-right-color','rgb(238,175,206)')
            $(this).children('.RG').animate({left:'-10px'}).end().children('.LF').animate({left:'10px'})
        },
        'mouseleave':function(){
            $(this).children('.CRtext').css('background','#fff').children('.intro').css('color',"#969696").end().children('.CRleft .before').css('border-left-color','#fff').end().children('.CRright .before').css('border-right-color','#fff')
            $(this).children('.RG').css({left:'0px'}).end().children('.LF').css({left:'0px'})
        }
    })
    $('.m1 .c2').on({
        'mouseenter':function(){
            $(this).children('.CRtext').css('background','rgb(238,175,206)').children('.intro').css('color',"#fff").end().children('.CRleft .before').css('border-left-color','rgb(238,175,206)').end().children('.CRright .before').css('border-right-color','rgb(238,175,206)')
            $(this).children('.RG').css({left:'-10px'}).end().children('.LF').css({left:'10px'})
        },
        'mouseleave':function(){
            $(this).children('.CRtext').css('background','#fff').children('.intro').css('color',"#969696").end().children('.CRleft .before').css('border-left-color','#fff').end().children('.CRright .before').css('border-right-color','#fff')
            $(this).children('.RG').css({left:'0px'}).end().children('.LF').css({left:'0px'})
        }
    })
    $('.m1 .c3').on({
        'mouseenter':function(){
            $(this).children('.CRtext').css('background','rgb(238,175,206)').children('.intro').css('color',"#fff").end().children('.CRleft .before').css('border-left-color','rgb(238,175,206)').end().children('.CRright .before').css('border-right-color','rgb(238,175,206)')
            $(this).children('.RG').css({left:'-10px'}).end().children('.LF').css({left:'10px'})
        },
        'mouseleave':function(){
            $(this).children('.CRtext').css('background','#fff').children('.intro').css('color',"#969696").end().children('.CRleft .before').css('border-left-color','#fff').end().children('.CRright .before').css('border-right-color','#fff')
            $(this).children('.RG').css({left:'0px'}).end().children('.LF').css({left:'0px'})
        }
    })
    $('.m2 .c1').on({
        'mouseenter':function(){
            $(this).children('.CRtext').css('background','rgb(151,200,108)').children('.intro').css('color',"#fff").end().children('.CRleft .before').css('border-left-color','rgb(151,200,108)').end().children('.CRright .before').css('border-right-color','rgb(151,200,108)')
            $(this).children('.RG').animate({left:'-10px'}).end().children('.LF').animate({left:'10px'})
        },
        'mouseleave':function(){
            $(this).children('.CRtext').css('background','#fff').children('.intro').css('color',"#969696").end().children('.CRleft .before').css('border-left-color','#fff').end().children('.CRright .before').css('border-right-color','#fff')
            $(this).children('.RG').css({left:'0px'}).end().children('.LF').css({left:'0px'})
        }
    })
    $('.m2 .c2').on({
        'mouseenter':function(){
            $(this).children('.CRtext').css('background','rgb(151,200,108)').children('.intro').css('color',"#fff").end().children('.CRleft .before').css('border-left-color','rgb(151,200,108)').end().children('.CRright .before').css('border-right-color','rgb(151,200,108)')
            $(this).children('.RG').css({left:'-10px'}).end().children('.LF').css({left:'10px'})
        },
        'mouseleave':function(){
            $(this).children('.CRtext').css('background','#fff').children('.intro').css('color',"#969696").end().children('.CRleft .before').css('border-left-color','#fff').end().children('.CRright .before').css('border-right-color','#fff')
            $(this).children('.RG').css({left:'0px'}).end().children('.LF').css({left:'0px'})
        }
    })
    $('.m2 .c3').on({
        'mouseenter':function(){
            $(this).children('.CRtext').css('background','rgb(151,200,108)').children('.intro').css('color',"#fff").end().children('.CRleft .before').css('border-left-color','rgb(151,200,108)').end().children('.CRright .before').css('border-right-color','rgb(151,200,108)')
            $(this).children('.RG').css({left:'-10px'}).end().children('.LF').css({left:'10px'})
        },
        'mouseleave':function(){
            $(this).children('.CRtext').css('background','#fff').children('.intro').css('color',"#969696").end().children('.CRleft .before').css('border-left-color','#fff').end().children('.CRright .before').css('border-right-color','#fff')
            $(this).children('.RG').css({left:'0px'}).end().children('.LF').css({left:'0px'})
        }
    })
    $('.m3 .c1').on({
        'mouseenter':function(){
            $(this).children('.CRtext').css('background','rgb(140,206,220)').children('.intro').css('color',"#fff").end().children('.CRleft .before').css('border-left-color','rgb(140,206,220)').end().children('.CRright .before').css('border-right-color','rgb(140,206,220)')
            $(this).children('.RG').animate({left:'-10px'}).end().children('.LF').animate({left:'10px'})
        },
        'mouseleave':function(){
            $(this).children('.CRtext').css('background','#fff').children('.intro').css('color',"#969696").end().children('.CRleft .before').css('border-left-color','#fff').end().children('.CRright .before').css('border-right-color','#fff')
            $(this).children('.RG').css({left:'0px'}).end().children('.LF').css({left:'0px'})
        }
    })
    $('.m3 .c2').on({
        'mouseenter':function(){
            $(this).children('.CRtext').css('background','rgb(140,206,220)').children('.intro').css('color',"#fff").end().children('.CRleft .before').css('border-left-color','rgb(140,206,220)').end().children('.CRright .before').css('border-right-color','rgb(140,206,220)')
            $(this).children('.RG').css({left:'-10px'}).end().children('.LF').css({left:'10px'})
        },
        'mouseleave':function(){
            $(this).children('.CRtext').css('background','#fff').children('.intro').css('color',"#969696").end().children('.CRleft .before').css('border-left-color','#fff').end().children('.CRright .before').css('border-right-color','#fff')
            $(this).children('.RG').css({left:'0px'}).end().children('.LF').css({left:'0px'})
        }
    })
    $('.m3 .c3').on({
        'mouseenter':function(){
            $(this).children('.CRtext').css('background','rgb(140,206,220)').children('.intro').css('color',"#fff").end().children('.CRleft .before').css('border-left-color','rgb(140,206,220)').end().children('.CRright .before').css('border-right-color','rgb(140,206,220)')
            $(this).children('.RG').css({left:'-10px'}).end().children('.LF').css({left:'10px'})
        },
        'mouseleave':function(){
            $(this).children('.CRtext').css('background','#fff').children('.intro').css('color',"#969696").end().children('.CRleft .before').css('border-left-color','#fff').end().children('.CRright .before').css('border-right-color','#fff')
            $(this).children('.RG').css({left:'0px'}).end().children('.LF').css({left:'0px'})
        }
    })
    $('.m4 .c1').on({
        'mouseenter':function(){
            $(this).children('.intro').css('color',"#fff")
            $(this).children('.RG').css({left:'-10px'}).end().children('.LF').css({left:'10px'})
        },
        'mouseleave':function(){
            $(this).children('.intro').css('color',"#969696")
            $(this).children('.RG').css({left:'0px'}).end().children('.LF').css({left:'0px'})
        }
    })
    $('.m4 .c2').on({
        'mouseenter':function(){
            $(this).children('.intro').css('color',"#fff")
            $(this).children('.RG').css({left:'-10px'}).end().children('.LF').css({left:'10px'})
        },
        'mouseleave':function(){
            $(this).children('.intro').css('color',"#969696")
            $(this).children('.RG').css({left:'0px'}).end().children('.LF').css({left:'0px'})
        }
    })
    // 点击该区域，使遮盖显现并且隐藏版块显现
    $('.m1').on('click',".column2 .row1,.column3 .row1,.column3 .row3",function(){
        $('#mask').show()
        $(this).children('.CRhidden').addClass('Hactive')
    })
    $('.m2').on('click',".column1 .row1,.column2 .row3,.column3 .row2,.column3 .row3",function(){
        $('#mask').show()
        $(this).children('.CRhidden').addClass('Hactive')
    })
    $('.m3').on('click',".column1 .row3,.column2 .row3,.column3 .row1",function(){
        $('#mask').show()
        $(this).children('.CRhidden').addClass('Hactive')
    })
    // 点击关闭按钮，隐藏版块，遮盖消失
    $('.hboxClose').on('click',function(e){
        $(this).parents('.CRhidden').removeClass('Hactive').addClass('regainState');
        $('#mask').hide()
        // console.log($(this).parents('.CRhidden'))
        // $('.CRhidden').toggleClass("regainState");
        e.stopPropagation();
        // $('.CRhidden').removeClass('Hactive')
    })
    // 点击购物车，蒙版z-index增加，自上而下弹出信息，添加商品至购物车
    var num = 0;
    $('.carbtn').click(function(e){
        num++
        $('#mask2').show()
        $('#drop').animate({
            top: '50%',
        })
        $('.carCount').text(num)
        e.stopPropagation();
    })
    // 点击继续购物或者关闭按钮蒙版隐藏恢复到点击前状态
    $('#drop').on('click','.backbuy,.dbcose',function(){
        $('#mask2').hide()
        $('#drop').animate({
            top: '-50%',
        })
    })
    //监听动画结束后移出regainstate类名
    $(document).on('animationend','.regainState',function(){
        // if($(this).is())
        // console.log($('.regainState'))
        $(this).removeClass('regainState')
        $('#mask').removeClass('show1')
    })
})